<template>
	<view class="container">
		<div id="map" style="height: 100%;"></div>
	</view>
</template>

<script>
	import {
		Et
	} from "../../assets/js/Oak.js";
	import marker from "@/assets/images/point/icon_chenck.png";
	export default {
		data() {
			return {
				mapGd: null,
				geoCoder: null,
				locMark: null,
				gisLoc: null,
				lastLoc: null,
				poiInfo:{}
			}
		},
		mounted() {
			if (this.mapGd == null) this.initMap();
		},
		destroyed() {
			if (this.mapGd != null) this.mapGd.destroy();
		},
		methods: {
			initMap: function() {
				this.mapGd = new AMap.Map('map', {
					resizeEnable: true,
					zoom: 16, //级别
					viewMode: '3D' //使用3D视图
				});
				//添加插件
				AMap.plugin(['AMap.ToolBar'], () => {
					this.mapGd.addControl(new AMap.ToolBar({
						position: "RB",
						liteStyle: true
					}));
				});
				//位置监听
				this.h5Location();
				this.initLocalListener(this.mapGd);
				this.initMapEvent(this.mapGd);
				//this.setCenter(16,[113,34]);
			},
			initLocalListener: function(map) {
				map.plugin('AMap.Geolocation', () => {
					let geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, // 是否使用高精度定位，默认:true
						timeout: 10000, // 超过10秒后停止定位，默认：无穷大
						maximumAge: 0, // 定位结果缓存0毫秒，默认：0
						convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
						showButton: false, // 显示定位按钮，默认：true
						buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
						buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
						showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
						panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
						zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					});
					map.addControl(geolocation);
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', function(info) {
						var str = '经纬度：' + info.position +
							'<br>精度范围：' + info.accuracy +
							'米<br>定位结果的来源：' + info.location_type +
							'<br>状态信息：' + info.info +
							'<br>地址：' + info.formattedAddress +
							'<hr>地址信息：' + JSON.stringify(info.addressComponent, null, 4);
						alert(str)
					});
					AMap.event.addListener(geolocation, 'error', function(e) {
						console.log(e.info + '--' + e.message)
					});
				});
			},
			initMapEvent: function(map) {
				map.on('click', (e) => {
					let lnglat = e["lnglat"];
					this.addMarker(lnglat);
				});
			},
			initGeoCode: function() {
				this.geoCoder = new AMap.Geocoder({
					radius: 100
				});
			},
			h5Location: function() {
				var str = "不支持定位功能";
				if (navigator.geolocation) {
					str = "支持定位功能，如果没有获取到坐标可能没有使用https加密链接。";
					navigator.geolocation.getCurrentPosition((position) => {
						str += "<p>获取定位</p>";
						console.log(str);
						let latitude = position.coords.latitude; //获取纬度
						let longitude = position.coords.longitude; //获取经度
						str = "位置：" + longitude + "," + latitude;
						this.gisLoc = [longitude, latitude];
						console.log("h5Location", str);
						this.setCenter(16, [longitude, latitude]);
					});
				} else {
					console.log("h5Location", str);
				}
			},
			// 实例化点标记
			addMarker: function(lnglat) {
				if (this.locMark != null) {
					this.locMark.setMap(null);;
				}
				this.locMark = new AMap.Marker({
					icon: marker,
					position: lnglat,
					offset: new AMap.Pixel(-13, -30)
				});
				this.locMark.setMap(this.mapGd);
				this.regeoCode(lnglat);
			},

			setCenter: function(zoom, lnglat) {
				this.addMarker(lnglat);
				this.mapGd.setZoomAndCenter(zoom, lnglat); //同时设置地图层级与中心点
			},
			//poi查询
			 regeoCode:function(lnglat) {
				if(this.geoCoder==null)this.initGeoCode();
				this.geoCoder.getAddress(lnglat, (status, result) => {
					if (status === 'complete' && result.regeocode) {
						var address = result.regeocode.formattedAddress;
						this.poiInfo = {address:address,local:[lnglat.lng,lnglat.lat]};
						console.log(this.poiInfo);
					} else {
						log.error('根据经纬度查询地址失败')
					}
				});
			}

		},
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding: 20px;
		font-size: 14px;
		line-height: 24px;
		animation: fadeInRight 0.4s 0s both;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		.content-wrapper {
			// padding: 0 32rpx;
			height: 100%;
		}
	}

	::v-deep .amap-marker-label {
		border-color: #6d6c6a;
		background-color: #fbfbfb;
		-webkit-box-shadow: 0px -3px 21px -7px #464141 inset;
		-moz-box-shadow: 0px -3px 21px -7px #464141 inset;
		box-shadow: 0px -3px 21px -7px #464141 inset;
		border-radius: 4px;

		.info {
			padding: 8rpx;
			position: relative;

			i {
				position: absolute;
				bottom: -23px;
				left: 50%;
				margin-left: -3px;
				content: '';
				border-bottom: 10px transparent dashed;
				border-left: 5px transparent dashed;
				border-right: 5px transparent dashed;
				border-top: 10px #313131 solid;

				&:before {
					position: absolute;
					bottom: -8px;
					left: 0;
					margin-left: -5px;
					content: '';
					border-bottom: 10px transparent dashed;
					border-left: 5px transparent dashed;
					border-right: 5px transparent dashed;
					border-top: 10px #D6D5D5 solid;
				}
			}
		}
	}
</style>
